<template>
	<uv-popup ref="popupRef" mode="bottom" closeable round="28rpx">
		<view class="bill-pop">
			<view class="title">查看账单</view>
			<scroll-view scroll-y style="height: 40vh;">
				<view class="list">
					<view class="item" v-for="(item, index) in logList" :key="index">
						<view class="hand">
							<text> {{ item.leaseName }}</text>
							<text>{{ item.refundTime }}</text>
						</view>
						<view class="price">{{ item.refundMoney }}元</view>
						<button class="cu-btn pay" v-if="item.status === 'PAID'">已支付</button>
						<button :disabled="item.disabled" class="cu-btn" v-else @click="handPay(item)">支付</button>
					</view>
				</view>
			</scroll-view>
		</view>
	</uv-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		defineEmits
	} from 'vue'
	import {
		doLogList,
		doPay
	} from '@/apis/order.js'
	const emit = defineEmits(['paySuccess'])

	const handPay = async (row) => {
		const {
			code,
			message
		} = await doPay(row.id)
		if (code !== 200) {
			uni.hideLoading()
			uni.$uv.toast(message)
			return
		}
		paySubmit(JSON.parse(message))
	}

	const paySubmit = (payInfo) => {
		uni.hideLoading()
		const orderInfo = {
			provider: 'wxpay', // 服务提提供商
			timeStamp: payInfo.timeStamp, // 时间戳
			nonceStr: payInfo.nonceStr, // 随机字符串
			package: payInfo.package,
			signType: payInfo.signType, // 签名算法
			paySign: payInfo.paySign, // 签名
		};
		uni.requestPayment({
			provider: 'wxpay',
			...orderInfo,
			success: (res) => {
				uni.$uv.toast('支付成功')
				emit('paySuccess')
				handClose()
			},
			fail: (err) => {
				uni.$uv.toast('支付失败')
			}
		});
	}


	const popupRef = ref(null)
	const logList = ref([])
	const handOpen = async (row) => {
		const data = await doLogList(row.id)
		const payIndex = data.findIndex(el => el.status === 'UNPAID')
		logList.value = data.map((el, index) => {
			el.disabled = index !== payIndex
			return el
		})
		popupRef.value.open()
	}
	const handClose = () => {
		popupRef.value.close()
	}
	defineExpose({
		handOpen
	})
</script>

<style lang="scss" scoped>
	.bill-pop {
		padding: 20rpx 24rpx 40rpx 24rpx;
		padding-bottom: 24rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);

		.title {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.list {
			margin-top: 30rpx;

			.item {
				padding: 28rpx 0;
				display: flex;
				align-items: center;

				.hand {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 320rpx;

					text {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;

						&:last-child {
							margin-top: 8rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}

				.price {
					flex: 1;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.cu-btn {
					width: 140rpx;
					height: 56rpx;
					background: #FFC434;
					border-radius: 32rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.pay {
					background: #B7B7B7;
					color: #333333;
				}
			}
		}
	}
</style>